<template>
	<view class="my_label">
		<view class="my_label_" v-for="(item,index) in labelData">
			<view v-for="(newItem,newIndex) in item.lis" class="my_label_">
				<!-- :style="{fontSize:`${maxFontSize - (fontSizeItem*item.liNum)}rpx`}" -->
				<view class="label_Item" :style="{fontSize:`${maxFontSize}rpx`}">{{newItem}}</view>
				<span v-if="(newIndex+1) != item.lis.length"></span>
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				maxFontSize : 55,
				fontSizeItem : 4
			}
		},
		props: ['labelData'],
		created() {
			// debugger
			// this.init();
			
		},
		methods:{
			// init(){
			// 	let itemLi = [];
			// 	let itemLiStr = '';
			// 	this.initData.forEach((item,index)=>{
			// 		itemLi.push(item);
			// 		itemLilen = itemLi.join('').length;
			// 		debugger
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	.my_label {
		// margin-top: 14rpx;
		    font-weight: bold;

		.my_label {}

		 span {
			display: inline-block;
			width: 22rpx;
			height: 22rpx;
			border-radius: 50%;
			background-color: #000000;
			margin: 0 10rpx;

		}
		.label_Item{
			display: inline-block;
		}

		.my_label_ {
			// margin-top: 16rpx;
			display: flex;
			align-items: center;

		}

		.my_label1 {
			font-size: 44rpx;
		}

		.my_label2 {
			font-size: 62rpx;
		}

		.my_label3 {
			font-size: 72rpx;
		}

		.my_label4 {
			font-size: 54rpx;
		}

		.my_label5 {
			font-size: 36rpx;
		}
	}
</style>
